// 要等到所有页面加载完毕之后再运行js
// 获取数据
// 使用定时器让图片自动播放
// 图片自动播放，小圆点跟着图片移动
// 手指触摸图片的时候，图片跟着手指动，这时候需要三个触摸事件，注意此时定时器应该停止，手指离开之后重新开始定时器

window.addEventListener('load', function () {
    // 获取数据
    var focus = document.querySelector('.focus')
    var ul = focus.children[0];
    var ol = focus.children[1];
    var w = focus.offsetWidth;
    // 使用定时器让图片自动播放
    // 声明一个index作为focus的索引
    var index = 0;
    var timer = setInterval(function () {
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';

    }, 2000)

    // transion过后会有空白，要解决这个问题使用transitionend事件
    ul.addEventListener('transitionend', function () {
        // 当index》=3的时候，重新给index赋值
        if (index >= 3) {
            index = 0;
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';

        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }

        // 图片自动播放，小圆点跟着图片移动
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');


    })
    // 手指触摸图片的时候，图片跟着手指动，这时候需要三个触摸事件，注意此时定时器应该停止，手指离开之后重新开始定时器
    // 声明第一个手指的触摸的位置
    var startx = 0;
    var movex = 0;
    // 声明图片初始位置

    // 这里不需要声明图片的初始位置，该值为-index.w；
    // 手指初始点击的值
    // 给ul添加事件
    ul.addEventListener('touchstart', function (e) {
        startx = e.targetTouches[0].pageX;
        clearInterval(timer);


    })
    // 手指移动后的值
    ul.addEventListener('touchmove', function (e) {
        // 计算移动距离
        movex = e.targetTouches[0].pageX - startx;
        // 移动盒子：  盒子原来的位置 + 手指移动的距离
        var translatex = -index * w + movex;
        // 手指拖动的时候，不需要动画效果所以要取消过渡效果
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        // flag = true; // 如果用户手指移动过我们再去判断否则不做判断效果
        e.preventDefault(); // 阻止滚动屏幕的行为
    });

    // 手指离开
    ul.addEventListener('touchend', function () {

        // 判断移动的距离是否大于50，如果大于50 则下一页或者上一页，index变化；如果没有则回弹
        if (Math.abs(movex) > 50) {

            if (movex > 0) {
                index--;
            } else {
                index++;
            }
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';


        } else {
            var translatex = -index * w;
            ul.style.transition = 'all .1s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }



        // 重新开启定时器

        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';

        }, 2000)


    })

    // 返回顶部模块
    var goBack = document.querySelector('.goBack');
    var nav = document.querySelector('nav');
    window.addEventListener('scroll', function () {
        if (window.pageYOffset > nav.offsetTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    })

    goBack.addEventListener('click', function () {
        window.scroll(0, 0);

    })





    // 最后的底线
})
